.dark-theme {
  .ant-layout-sider {
    background: #1f1f1f;
  }
}

.light-theme {
  .ant-layout-sider {
    background: none;
  }


  .top-menu{
    background-color: var(--header-menu-color);
    color: var(--header-text-color);
  }
  .ant-menu-horizontal{
    border-bottom: 0;
  }
  .ex-admin-sub-menu{
    .ant-menu{
      border-bottom: none;
      color: var(--header-text-color);
      background-color: var(--header-menu-color);
    }
    .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-active:after, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-open:after, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-selected:after, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item:hover:after, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-active:after, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-open:after, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-selected:after, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu:hover:after{
      border-bottom: 2px solid var(--top-menu-selected-color);
    }
    .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-active, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-open, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-selected, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item:hover, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-active, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-open, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-selected, .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu:hover{
      color: var(--top-menu-selected-color);
    }
    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
      background-color: var(--header-menu-color) ;
      color: var(--top-menu-selected-color);
    }
    .ant-menu-submenu-popup>.ant-menu {
      color: var(--header-text-color);
      background-color: var(--header-menu-color);
    }
    .ant-menu-submenu-arrow{
      color: var(--header-text-color);
    }
    .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow, .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-expand-icon {
      color:  var(--top-menu-selected-color);
    }
    .ant-menu-submenu-title:hover {
      color: var(--top-menu-selected-color);
    }
    .ant-menu-light .ant-menu-item-active, .ant-menu-light .ant-menu-item:hover, .ant-menu-light .ant-menu-submenu-active, .ant-menu-light .ant-menu-submenu-title:hover, .ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open {
      color: var(--top-menu-selected-color);
    }
    .ant-menu-light .ant-menu-item-selected {
      color: var(--top-menu-selected-color);
      background-color: var(--header-menu-color);
    }
    .ant-menu-item-active:hover,.ant-menu-light .ant-menu-submenu-title:hover {
      color: var(--top-menu-selected-color);
    }
    .ant-menu-vertical .ant-menu-submenu-selected, .ant-menu-vertical-left .ant-menu-submenu-selected, .ant-menu-vertical-right .ant-menu-submenu-selected{
      color: var(--top-menu-selected-color);
    }
    .ant-menu-item:focus-visible, .ant-menu-submenu-title:focus-visible{
      background-color: var(--header-menu-color);
    }
    .ant-menu-item:active, .ant-menu-submenu-title:active{
      background-color: var(--header-menu-color);
    }
  }

  .sider-menu{
    box-shadow: 0 0 10px 2px rgb(0 0 0 / 8%);
    background: var(--sider-menu-color);
    color: var(--sider-text-color);
    .ant-menu{
      background: var(--sider-menu-color);
      color: var(--sider-text-color);
    }
    .ant-menu-submenu-arrow, .ant-menu-submenu-expand-icon{
      color: var(--sider-text-color);
    }
    .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow, .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-expand-icon {
      color: var(--sider-menu-selected-color1);
    }

    .ant-menu-submenu-active {
      color: var(--sider-menu-selected-color1);
    }

    .ant-menu-item-active:hover, .ant-menu-submenu-title:hover {
      color: var(--sider-menu-selected-color1);
    }

    .ant-menu-submenu-selected {
      color: var(--sider-menu-selected-color1);
    }

    .ant-menu-inline .ant-menu-item:after {
      border-right: 3px solid var(--sider-menu-selected-color1);
    }

    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
      background-color: var(--sider-menu-selected-color2);
      color: var(--sider-menu-selected-color1);
    }
    .ant-menu-sub.ant-menu-inline {
      background: var(--sider-menu-color);
    }
  }
}

